<template>
  <div class="mains">
    <div class="other">
      <p class="main_text">概況</p>
    </div>
    <div class="els first">
      <div class="els first_left">
        <div class="mes_boxs">
          <div class="els mes_top">
            <p>本月累计注册用户数</p>
            <p class="mes_num">
              {{ plateformMes.userCountInfo.current_month_count }}
            </p>
          </div>
          <div class="els mes_btm">
            <p>
              上月{{ plateformMes.userCountInfo.previous_month_count }}&emsp; 环比上月&nbsp;<span style="color: red">
                <span v-if="String(plateformMes.userCountInfo.growth_rate).substring(0, 1) != '-'">
                  <el-icon><Top /></el-icon>{{ plateformMes.userCountInfo.growth_rate }} %
                </span>
                <span v-else>
                  <el-icon><Bottom /></el-icon>{{ String(plateformMes.userCountInfo.growth_rate).substring(1) }}%
                </span>
              </span>
            </p>
          </div>
        </div>
        <div class="mes_boxs">
          <div class="els mes_top">
            <p>本月累计报废车数</p>
            <p class="mes_num">
              {{ plateformMes.carCountInfo.current_month_count }}
            </p>
          </div>
          <div class="els mes_btm">
            <p>
              上月{{ plateformMes.carCountInfo.previous_month_count }}&emsp; 环比上月&nbsp;<span style="color: red">
                <span v-if="String(plateformMes.carCountInfo.growth_rate).substring(0, 1) != '-'">
                  <el-icon><Top /></el-icon>{{ plateformMes.carCountInfo.growth_rate }} %
                </span>
                <span v-else>
                  <el-icon><Bottom /></el-icon>{{ String(plateformMes.carCountInfo.growth_rate).substring(1) }}%
                </span>
              </span>
            </p>
          </div>
        </div>
        <div class="mes_boxs">
          <div class="els mes_top">
            <p>本月累计订单量</p>
            <p class="mes_num">
              {{ plateformMes.orderCountInfo.current_month_count }}
            </p>
          </div>
          <div class="els mes_btm">
            <p>
              上月{{ plateformMes.orderCountInfo.previous_month_count }}&emsp; 环比上月&nbsp;<span style="color: red">
                <span v-if="String(plateformMes.orderCountInfo.growth_rate).substring(0, 1) != '-'">
                  <el-icon><Top /></el-icon>{{ plateformMes.orderCountInfo.growth_rate }} %
                </span>
                <span v-else>
                  <el-icon><Bottom /></el-icon>{{ String(plateformMes.orderCountInfo.growth_rate).substring(1) }}%
                </span>
              </span>
            </p>
          </div>
        </div>
        <div class="mes_boxs">
          <div class="els mes_top">
            <p>本月累计商城售后订单数</p>
            <p class="mes_num">
              {{ plateformMes.afterCountInfo.current_month_count }}
            </p>
          </div>
          <div class="els mes_btm">
            <p>
              上月{{ plateformMes.afterCountInfo.previous_month_count }}&emsp;环比上月&nbsp;<span style="color: red">
                <span v-if="String(plateformMes.afterCountInfo.growth_rate).substring(0, 1) != '-'">
                  <el-icon><Top /></el-icon>{{ plateformMes.afterCountInfo.growth_rate }} %
                </span>
                <span v-else>
                  <el-icon><Bottom /></el-icon>{{ String(plateformMes.afterCountInfo.growth_rate).substring(1) }}%
                </span>
              </span>
            </p>
          </div>
        </div>
      </div>
      <!-- /*/*/*/*/*/*/*/*/*/*  用户转化漏斗图  /*/*/*/*/*/*/*/*/*/* -->
      <!-- <div id="first_echarts" class="first_echarts">
        <funnelPlot
          :firstechartsHeight="firstechartsHeight"
          :firstechartsWidth="firstechartsWidth"
        ></funnelPlot>
      </div> -->
    </div>
    <div class="els secound">
      <!-- /*/*/*/*/*/*/*/*/*/*  平台用户访问人数  /*/*/*/*/*/*/*/*/*/* -->
      <div class="visit">
        <div class="els visit_title">
          平台访问次数
          <el-radio-group size="small" v-model="visitMethod" style="position: absolute; right: 10px; top: 10px">
            <el-radio-button label="折线图" />
            <el-radio-button label="柱状图" />
          </el-radio-group>
        </div>
        <div class="visit_num">8674<span style="font-size: 12px">人</span></div>
        <div class="register_mes" id="register_mes_cpm">
          <visit
            style="width: 100%; height: 100%"
            v-show="visitMethod == '折线图'"
            :userVisitMonthlyCount="plateformMes.userVisitMonthlyCount"></visit>
        </div>
        <visit1
          class="register_mes"
          :userVisitMonthlyCount="plateformMes.userVisitMonthlyCount"
          :firstechartsHeight="firstechartsHeight"
          :firstechartsWidth="firstechartsWidth"
          v-show="visitMethod == '柱状图'"></visit1>
      </div>
      <!-- /*/*/*/*/*/*/*/*/*/*  平台用户注册人数  /*/*/*/*/*/*/*/*/*/* -->
      <div class="visit">
        <div class="els visit_title">
          平台用户注册人数
          <el-radio-group size="small" v-model="registerMethod" style="position: absolute; right: 10px; top: 10px">
            <el-radio-button label="折线图" />
            <el-radio-button label="柱状图" />
          </el-radio-group>
        </div>
        <div class="visit_num">8674<span style="font-size: 12px">人</span></div>
        <register
          class="register_mes"
          v-show="registerMethod == '折线图'"
          :userMonthlyCount="plateformMes.userMonthlyCount"></register>
        <register1
          class="register_mes"
          :userMonthlyCount="plateformMes.userMonthlyCount"
          :firstechartsHeight="firstechartsHeight"
          :firstechartsWidth="firstechartsWidth"
          v-show="registerMethod == '柱状图'"></register1>
      </div>
    </div>
    <div class="els center">
      <div class="els visit_title">
        GMV(商品交易总额)
        <el-radio-group size="small" v-model="saleMethod" style="position: absolute; right: 10px; top: 10px">
          <el-radio-button label="折线图" />
          <el-radio-button label="柱状图" />
        </el-radio-group>
      </div>
      <div class="center_left">
        <div class="visit_num">8674<span style="font-size: 12px">人</span></div>
        <div class="center_mes" id="center_mes_box">
          <sale
            style="width: 100%; height: 100%"
            :monthlyAllSalesInfo="plateformMes.monthlyAllSalesInfo"
            v-show="saleMethod == '折线图'"></sale>
        </div>
        <sale1
          class="center_mes"
          :monthlyAllSalesInfo="plateformMes.monthlyAllSalesInfo"
          :centerchartsWidth="centerchartsWidth"
          :centerechartsHeight="centerechartsHeight"
          v-show="saleMethod == '柱状图'"></sale1>
      </div>
      <div class="center_right">
        <div class="els" style="line-height: 40px; font-size: 14px">
          <span>商品销售情况</span><span>截止时间：2023/12/01-2023/12/07</span>
        </div>
        <el-table
          :data="tableData"
          height="230px"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column fixed prop="productSn" label="序号" align="center" />
          <el-table-column prop="name" label="商品名" align="center" />
          <el-table-column prop="salePrice" label="商品品牌" align="center" />
          <el-table-column prop="linePrice" label="商品类目" align="center" />
          <el-table-column prop="typeName" label="店铺名称" align="center" />
        </el-table>
        <div style="width: 100%; display: flex; justify-content: center">
          <el-pagination small layout="prev, pager, next" :total="1000" style="margin-top: 5px" />
        </div>
      </div>
    </div>
    <!-- <div class="els center">
      <div class="center_left" style="height: 100%">
        <SalesPerCategory
          class="center_mes"
          style="height: 100%"
          :salesGroupByType="plateformMes.salesGroupByType"
        ></SalesPerCategory>
      </div>
      <div class="center_right">
        <div class="els" style="line-height: 40px; font-size: 14px">
          <span>商品销售情况</span><span>截止时间：2023/12/01-2023/12/07</span>
        </div>
        <el-table
          :data="tableData"
          height="230px"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }"
        >
          <el-table-column fixed prop="productSn" label="序号" align="center" />
          <el-table-column prop="name" label="商品类目" align="center" />
          <el-table-column prop="salePrice" label="购买次数" align="center" />
        </el-table>
        <div style="width: 100%; display: flex; justify-content: center"></div>
      </div>
    </div> -->
    <!-- <div class="last">
      <ul class="nav_ul" style="padding: 0">
        <li
          v-for="(item, index) in nav_list"
          :key="index"
          :class="item.class"
          @click="navChange(item)"
        >
          <span class="nav_lis">
            {{ item.text }}
          </span>
        </li>
      </ul>

      <mapChart class="last_mes"></mapChart>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import {Top, Bottom} from '@element-plus/icons-vue';
import {ref, onMounted, defineAsyncComponent,onBeforeMount} from 'vue';
import {RequestPlateformData} from '@/api/path/index.js';
const register = defineAsyncComponent(() => import('@/components/PlatformOverview/register.vue'));
const register1 = defineAsyncComponent(() => import('@/components/PlatformOverview/register1.vue'));
const visit = defineAsyncComponent(() => import('@/components/PlatformOverview/visit.vue'));
const visit1 = defineAsyncComponent(() => import('@/components/PlatformOverview/visit1.vue'));
const sale = defineAsyncComponent(() => import('@/components/PlatformOverview/sale.vue'));
const sale1 = defineAsyncComponent(() => import('@/components/PlatformOverview/sale1.vue'));
// const SalesPerCategory = defineAsyncComponent(() => import('@/components/PlatformOverview/SalesPerCategory.vue'));
// const mapChart = defineAsyncComponent(() => import('@/components/PlatformOverview/mapChart.vue'));
// const funnelPlot = defineAsyncComponent(() => import('@/components/PlatformOverview/funnelPlot.vue'));
const activeName = ref('各省收车统计'); //当前显示的导航栏
const tableData = ref([])
const nav_list = ref([
  {
    class: ['navlist', 'nav_li'],
    text: '各省收车统计',
    status: '0',
  },
  {
    class: ['nav_li'],
    text: '各省活跃度统计',
    status: '1',
  },
]);
const plateformMes = ref({
  carCountInfo: {
    current_month_count: 0,
    growth_rate: '',
    previous_month_count: 0,
  },
  userCountInfo: {
    current_month_count: 0,
    growth_rate: '',
    previous_month_count: 0,
  },
  orderCountInfo: {
    current_month_count: 0,
    growth_rate: '',
    previous_month_count: 0,
  },
  afterCountInfo: {
    current_month_count: 0,
    growth_rate: '',
    previous_month_count: 0,
  },
  salesGroupByType: [],
  monthlyAllSalesInfo: [],
  userMonthlyCount: [],
  userVisitMonthlyCount: [],
});
const visitMethod = ref('折线图');
const saleMethod = ref('折线图');
const registerMethod = ref('折线图');
const chartshow = ref(false);
const firstechartsWidth = ref('');
const firstechartsHeight = ref('');
const centerchartsWidth = ref('');
const centerechartsHeight = ref('');
onBeforeMount(async()=>{
   const a = await RequestPlateformData();
  chartshow.value = true;
  plateformMes.value = a.resultObj;
  getWindowResize();
  window.addEventListener('resize', getWindowResize);
})
onMounted( () => {
  var chartDom = document.getElementById('register_mes_cpm');
  firstechartsWidth.value = chartDom!.offsetWidth + 'px';
  firstechartsHeight.value = chartDom!.offsetHeight + 'px';
  var chartDom = document.getElementById('center_mes_box');
  centerchartsWidth.value = chartDom!.offsetWidth + 'px';
  centerechartsHeight.value = chartDom!.offsetHeight + 'px';
 
});

// 屏幕宽度
const windowWidth = ref(0);
// 屏幕高度
const windowHeight = ref(0);
const width = ref<any>();
// 获取屏幕尺寸
const getWindowResize = function () {
  windowWidth.value = window.innerWidth;
  windowHeight.value = window.innerHeight;
  console.log('当期宽度1111', window.innerWidth);
  if (windowWidth.value <= 1542) {
    width.value = '1300px';
  } else {
    width.value = '100%';
  }
  console.log('当期宽度', width.value);
};
const navChange = (item: any) => {
  for (let i = 0; i < nav_list.value.length; i++) {
    const filteredClasses = nav_list.value[i].class.filter((className) => className !== 'navlist');
    nav_list.value[i].class = filteredClasses;
  }
  item.class.push('navlist');
};
</script>

<style scoped lang="scss">
.mains {
  width: v-bind(width);
}
.first {
  width: 100%;
  .first_left {
    width: 100%;
    height: 100%;
    flex-wrap: wrap;

    .mes_boxs {
      width: 24%;
      height: 140px;
      border-radius: 5px;
      background: #fff;
      padding: 10px;
      .mes_top {
        height: 75px;
        width: 100%;
        flex-wrap: wrap;
        align-content: space-around;
        font-size: 16px;
        color: #9e9e9e;
        padding-bottom: 10px;
        .mes_num {
          width: 100%;
          font-size: 20px;
          font-weight: bold;
          color: #333;
        }
      }
      .mes_btm {
        width: 100%;
        height: 35px;
        font-size: 14px;
        border-top: 1px dotted #b9b9b9;
      }
    }
  }
  .first_echarts {
    width: 38%;
    height: 100%;
    background: #fff;
    padding: 20px;
  }
}
.secound {
  width: 100%;
  margin-top: 20px;
  height: calc(50vh - 170px);
  min-height: 200px;
  .visit {
    width: 49%;
    height: 100%;
    border-radius: 5px;
    background: #fff;
    position: relative;
    .register_mes {
      width: 100%;
      height: 70%;
      position: absolute;
      bottom: 0;
    }
  }
}
.center {
  width: 100%;
  height: calc(50vh - 170px);
  min-height: 200px;
  margin-top: 20px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
  .center_left {
    width: 60%;
    height: calc(100% - 40px);
    position: relative;
    .center_mes {
      width: 100%;
      height: calc(100% - 35px);
      position: absolute;
      bottom: 0;
    }
  }
  .center_right {
    width: 38%;
    height: calc(100% - 40px);
    margin-right: 10px;
  }
}
.last {
  width: 100%;
  height: 600px;
  border-radius: 5px;
  background: #fff;
  margin: 20px 0 60px 0;
  .nav_ul {
    width: 80%;
    height: 40px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    font-size: 15px;
    overflow-x: auto; /* 设置x轴可滑动 */
    white-space: nowrap; /* 元素不换行 */
    width: auto; /* (宽度) */
    border-bottom: 1px solid #e6e6e6;
    .nav_li {
      width: 120px;
      height: 40px;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      margin-left: 20px;
    }
    .navlist {
      color: #116cf8;
      border-bottom: 3px solid #116cf8;
    }
  }
  .last_mes {
    width: 49%;
    height: calc(100% - 50px);
  }
}
.visit_title {
  width: 100%;
  height: 40px;
  margin: 0px 10px;
}
.visit_num {
  width: 100%;
  margin: 6px 10px;
  font-size: 22px;
  font-weight: bold;
}
</style>
